"use client";

import { useEffect, useState } from 'react';

const MascotSVG = () => (
  <svg
    width="80"
    height="80"
    viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
    className="drop-shadow-lg"
  >
    <defs>
      <radialGradient id="grad-body" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style={{ stopColor: '#FFFFFF', stopOpacity: 1 }} />
        <stop offset="100%" style={{ stopColor: '#E6E6FA', stopOpacity: 0.9 }} />
      </radialGradient>
      <radialGradient id="grad-cheek" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style={{ stopColor: '#FFB6C1', stopOpacity: 0.8 }} />
        <stop offset="100%" style={{ stopColor: '#FFB6C1', stopOpacity: 0 }} />
      </radialGradient>
    </defs>
    <style>
      {`
        .mascot-body {
          animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
          0% { transform: translateY(0px); }
          50% { transform: translateY(-15px); }
          100% { transform: translateY(0px); }
        }
        .eye {
          animation: blink 4s infinite step-start;
        }
        @keyframes blink {
          0%, 90% { transform: scaleY(1); }
          95%, 100% { transform: scaleY(0.1); }
        }
      `}
    </style>
    <g className="mascot-body">
      <path
        d="M20,60 C20,20 80,20 80,60 Q80,90 50,90 Q20,90 20,60z"
        fill="url(#grad-body)"
      />
      <circle cx="35" cy="55" r="10" fill="url(#grad-cheek)" />
      <circle cx="65" cy="55" r="10" fill="url(#grad-cheek)" />
      <circle className="eye" cx="40" cy="50" r="3" fill="#5c5c5c" />
      <circle className="eye" cx="60" cy="50" r="3" fill="#5c5c5c" />
      <path d="M48,65 Q50,70 52,65" stroke="#5c5c5c" strokeWidth="2" fill="none" strokeLinecap="round" />
    </g>
  </svg>
);

export function DynamicMascot() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setVisible(true), 1000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div
      className={`fixed bottom-4 right-4 z-50 transition-opacity duration-1000 ${
        visible ? 'opacity-100' : 'opacity-0'
      }`}
      aria-hidden="true"
    >
      <MascotSVG />
    </div>
  );
}
